<template>
	<view class="content">
		<!--监听查看 :cy="cy" :change:cy="ol.receiveName" -->
		<view class="btnBox" @click="select">
			<view class="btns">选择</view>
			<uni-icons type="bottom" size="20" style="line-height: 80rpx;"></uni-icons>
		</view>

		<view id="olMap" class="olMap" style="height: 100vh;" @click="ol.emitData" />
		<view class="dialog" v-if="showDialog">
			<ly-tree :tree-data="data" :props="defaultProps" node-key="id" show-checkbox
				:default-checked-keys="checkedKeys" :expand-on-check-node="expandOnCheckNode" @check="handleCheck"
				@check-change="handleCheckChange" @node-click='nodeClick' />
			<view class="btnQ" v-if="!shebeiFlag">
				<button type="primary" size="mini" style="margin: 30rpx 0;" @click="overS">{{ $t('warn:ok') }}</button>
				<button @click="clear" size="mini" style="margin: 30rpx 0;">{{ $t('warn:cancel') }}</button>
			</view>
		</view>
		<view class="zhezhao" v-if="showDialog" @click="select"></view>
		<div id="popup" class="ol-popup">
			<div class="pophead" style="width:100%;height: 20px;">
				<!-- //弹出框标题 -->
				<div id="popup-title"
					style="font:bold 15px sans-serif;align:left;position: absolute;top: 5px;left: 15px;color: #000000">
					设备信息</div>
				<!-- //弹出框右上角关闭效果 -->
				<a href="#" id="popup-closer" class="ol-popup-closer" style="color:#8e908c;"></a>
			</div>
			<!-- //弹出框内容 -->
			<div id="popup-content"></div>
		</div>
	</view>
</template>
<script module="ol" lang="renderjs">
	//视图层renderjs操作，注意此层中不能uniapp提供相关接口。
	// import '../../static/openlayer/v6.6.1-dist/ol.js'不支持此导入方式否则，打包失败
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	import {
		treeNodeCount,
		treeList,
		agg,
		cameraGet,
		queryByCid
	} from '@/api/map/index.js'
	export default {
		components: {
			LyTree
		},
		data() {
			return {
				nodeList: [], //设备
				nodeListCopy: "", //设备名称
				typeOn: "",
				showDialog: false,
				title: 'Hello',
				//打点数据源
				wrnameData: [{
					x: '124.684607429589',
					y: '41.1910493642868',
					wrname: '点位测试'
				}, ],
				pointLayer: '',
				lng: '',
				lat: '',

				expandOnCheckNode: false, // 是否展开选中的节点
				data: [{
					id: 1,
					label: '一级 1',
					children: [{
						id: 4,
						label: '二级 1-1',
						children: [{
							id: 9,
							label: '三级 1-1-1'
						}, {
							id: 10,
							label: '三级 1-1-2'
						}]
					}]
				}, {
					id: 2,
					label: '一级 2',
					XXX: 12,
					children: [{
						id: 5,
						label: '二级 2-1'
					}, {
						id: 6,
						label: '二级 2-2'
					}]
				}, {
					id: 3,
					label: '一级 3',
					children: [{
						id: 7,
						label: '二级 3-1'
					}, {
						id: 8,
						label: '二级 3-2'
					}]
				}],
				defaultProps: {
					children: 'children',
					label: 'label',
				},
				nodeArr: [],
				feature: '',
				overlayForm: '',
				container: '',
				title: '',
				content: '',
				popupCloser: '',
				shebeiList: [],
				shebeiFlag: false,
				checkedKeys: []
			}
		},
		mounted() {
			this.initTreeNode()
			if (typeof window.ol === 'function') {
				this.initAmap()
			} else {
				const script = document.createElement('script')
				script.src = 'static/js/ol.js' //可以通过此方式导入jquery，echart库
				script.onload = this.initAmap.bind(this)
				document.head.appendChild(script)
			}
		},
		onLoad(option) {
			var that = this
			this.typeOn = option.type
			//判断是否需要回填
			if (option.shebeiType == 1) {
				this.shebeiFlag = true
				this.shebeiList = JSON.parse(localStorage.getItem('shebeiList'))
				for (var a = 0; a < this.shebeiList.length; a++) {
					this.checkedKeys.push(this.shebeiList[a].id)
				}
				console.log('checkedKeys', this.checkedKeys)
			}
			setTimeout(function() {
				that.select()
			}, 500)
		},
		methods: {
			// 确定
			overS() {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				if (this.typeOn == 1) {
					prevPage.$vm.form.nodeList = this.nodeList
					prevPage.$vm.nodeListCopy = this.nodeListCopy
					uni.navigateBack({
						delta: 1
					})
				} else if (this.typeOn == 2) {
					prevPage.$vm.formTricycle.nodeList = this.nodeList
					prevPage.$vm.nodeListCopys = this.nodeListCopy
					uni.navigateBack({
						delta: 1
					})
				} else if (this.typeOn == 3) {
					prevPage.$vm.formRecog.nodeList = this.nodeList
					prevPage.$vm.nodeListCopy = this.nodeListCopy
					uni.navigateBack({
						delta: 1
					})
				}

			},
			// 取消
			clear() {
				this.nodeList = []
				this.nodeListCopy = ''
				this.select()
			},
			select() {
				this.showDialog = !this.showDialog
			},
			nodeClick(obj) {
				if (obj.data.id) {
					this.showPointDetails(obj.data.id)
				}
			},
			showPointDetails(data) {
				var that = this
				//创建弹出框容器
				var overlay1 = new ol.Overlay({
					//设置弹出框的容器
					element: that.container,
					//是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
					autoPan: true,
					autoPanAnimation: {
						duration: 250
						//当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
					}
				});
				var cameraGetparam = {
					deviceCameraId: data
				}
				cameraGet(cameraGetparam).then(cameraGetRes => {
					console.log(cameraGetRes)
					var view = that.map.getView();
					// 设置地图中心，将地图移动到中心点
					view.setCenter(ol.proj.transform([parseFloat(cameraGetRes.data.lng), parseFloat(cameraGetRes
							.data.lat)], 'EPSG:4326',
						'EPSG:3857'));
					view.setZoom(17)
					that.map.render();
					var sblx = ''
					if (cameraGetRes.data.deviceCameraType == "CAPTURE_DAHUA") {
						sblx = '人脸卡口'
					}
					var zt = ''
					if (cameraGetRes.data.heartbeatStatus == 1) {
						zt = '在线'
					} else {
						zt = '离线'
					}
					that.title.innerHTML = '<div>' + cameraGetRes.data.deviceCameraName + '</div>'
					that.content.innerHTML = "<div>" +
						'<div style="display:flex;"><div style="width:65px;text-align: right;padding-right: 10px;">状态:</div><span class="' +
						(cameraGetRes.data.heartbeatStatus == 1 ? 'onLine' : 'outLine') +
						'">' + zt + '</span></div>' +
						'<div style="display:flex;"><div style="width:65px;text-align: right;padding-right: 10px;">设备类型:</div>' +
						sblx + '</div>' +
						'<div style="display:flex;"><div style="width:65px;text-align: right;padding-right: 10px;">像机编号:</div>' +
						cameraGetRes.data.deviceCameraId + '</div>' +
						'<div style="display:flex;"><div style="width:65px;text-align: right;padding-right: 10px;">所属区域:</div>' +
						cameraGetRes.data.deviceCameraName + '</div>' +
						'<div style="display:flex;"><div style="width:65px;text-align: right;padding-right: 10px;">经纬度:</div>' +
						cameraGetRes.data.lng + ',' + cameraGetRes.data.lat + '</div>' +
						'<div style="display:flex;"><div style="width:65px;text-align: right;padding-right: 10px;">实时解析:</div>' +
						'无' + '</div>' +
						'<div style="display:flex;"><div style="width:65px;text-align: right;padding-right: 10px;">录像解析:</div>' +
						'无' + '</div>' +
						"</div>";

					overlay1.setPosition(ol.proj.transform([parseFloat(cameraGetRes.data.lng), parseFloat(
							cameraGetRes.data.lat)], 'EPSG:4326',
						'EPSG:3857')); //设置弹窗位置
					that.map.addOverlay(overlay1);
					//关闭弹出框操作
					that.popupCloser.addEventListener('click', function() {
						overlay1.setPosition(undefined);
					});
				})
				that.showDialog = false
			},
			// 只有在"点击"修改的指定节点会触发(也就是说这个方法只会触发一次)，obj中包含当前选中
			handleCheck(obj) {
				// obj: {
				// 	checkedKeys: [9, 5], // 当前选中节点的id数组
				// 	checkedNodes: [{...}, {...}], // 当前选中节点数组
				// 	data: {...}, // 当前节点的数据
				// 	halfCheckedKeys: [1, 4, 2], // 半选中节点的id数组
				// 	halfCheckedNodes: [{...}, {...}, {...}], // 半选中节点的数组
				// 	node: Node {...} // 当前节点实例
				// }

				console.log('handleCheck', obj);
				var arr = []
				var arrName = []
				console.log('handleCheck', obj);
				for (var i = 0; i < obj.checkedNodes.length; i++) {
					if (obj.checkedNodes[i].type == 2) {
						arr.push({
							nodeId: obj.checkedNodes[i].id,
							nodePath: obj.checkedNodes[i].nodePath,
							nodeType: obj.checkedNodes[i].nodeType,
							selType: 1
						})
						arrName.push(obj.checkedNodes[i].label)
					}
				}
				this.nodeList = arr
				this.nodeListCopy = arrName.toString()

			},

			// 只要节点的选中或半选中状态改变就触发（包括设置默认选中，点击选中/取消选中），其相关的所有父子节点都会触发（也就是说选中一个节点时，触发多次，父子节点的选中状态只要被修改就会触发）
			handleCheckChange(obj) {
				// obj: {
				// 	checked: true, // 节点是否选中
				// 	checkedall: false, // 当前树的所有节点是否全选中
				// 	data: {...}, // 节点数据
				// 	indeterminate: false, // 是否半选中
				// 	node: Node {...} // 节点实例
				// }

				// console.log('handleCheckChange', obj);
			},


			initAmap() {
				var that = this
				setTimeout(function() {
					that.map.getView().animate({
						center: ol.proj.transform([123.79918300000001, 41.278106], 'EPSG:4326',
							'EPSG:3857'),
						duration: 500,
						zoom: 13,
					})
				}, 1000)

				var that = this
				var format = '.png';
				var urlType = '3';
				var url = 'http://20.17.1.53:8245/';
				// if (urlType == "0") {
				// 	url += "{z}/{x}/{y}" + format;
				// } else if (urlType == "1") {
				// 	url += "{z}/{y}/{x}" + format;
				// } else if (urlType == "2") {
				// 	url += "{z}/{x}/{x}_{y}" + format;
				// } else if (urlType == "3") {
				// 	url += "{z}/{x}/{-y}" + format;
				// }

				this.map = new ol.Map({
					layers: [
						new ol.layer.Tile({
							baseLayer: true,
							preview: '../../../static/img/0.png',
							source: new ol.source.XYZ({
								url: url + 'L{z}/R{y}/C{x}' + '.png',
								tileUrlFunction: function(tileCoord, pixelRatio, projection) {
									if (!tileCoord) {
										return undefined;
									} else {
										var z = tileCoord[0];
										if (z < 10) {
											z = "0" + z;
										}
										var tempX = "00000000" + (tileCoord[1]).toString(16)
											.toUpperCase();
										var tempY = "00000000" + (-tileCoord[2] - 1).toString(
											16).toUpperCase();
										return this.getUrls()[0].replace('{x}', tempX
												.substring(tempX.length - 8))
											.replace('{y}', tempY.substring(tempY.length - 8))
											.replace('{z}', z)

									}
								},
								// url: url,
								projection: ol.proj.get('EPSG:3857'),
							})
						}),
					],
					target: "olMap",
					view: new ol.View({
						projection: 'EPSG:3857',
						// 本溪市
						center: ol.proj.transform([124.684607429589, 41.1910493642868], 'EPSG:4326',
							'EPSG:3857'),
						//重庆
						// center: ol.proj.transform([106.5166995, 29.516596], 'EPSG:4326',
						// 	'EPSG:3857'),
						zoom: 3, //地图初始层级
						minZoom: 1
					}),
					target: 'olMap'
				})

				//拿到弹出框元素
				this.container = document.getElementById("popup");
				//弹窗title
				this.title = document.getElementById("popup-title")
				//拿到弹出框内容元素
				this.content = document.getElementById("popup-content");
				//拿到弹出框关闭元素
				this.popupCloser = document.getElementById("popup-closer");
				//创建弹出框容器
				var overlay1 = new ol.Overlay({
					//设置弹出框的容器
					element: this.container,
					//是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
					autoPan: true,
					autoPanAnimation: {
						duration: 250
						//当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
					}
				});


				// this.drawPoint()
				var that = this
				var featureData = ""
				this.map.on('click', function(e) {
					const feature = that.map.forEachFeatureAtPixel(e.pixel, function(feature) {
						featureData = feature
					})
					if (featureData.values_.type == 1) {
						// 获取当前屏幕范围
						var localPoint = that.getMapPoint()
						var cidParam = {
							cid: featureData.values_.shuxing.cid,
							currentPage: 1,
							pageSize: 4,
							sceneIds: [],
							northEast: localPoint.northEast,
							southWest: localPoint.southWest,
							zoom: localPoint.zoom
						}
						queryByCid(cidParam).then(cidRes => {
							var pixel = that.map.getEventPixel(e.originalEvent);
							that.map.forEachFeatureAtPixel(pixel, function(feature) {
								var attr = feature.getProperties();
								var coodinate = e.coordinate;
								var html = ''
								for (var a = 0; a < cidRes.data.datas.length; a++) {
									html += '<div class="mapRow">'
									html += '<div>' + cidRes.data.datas[a].deviceCameraName +
										'</div>'
									html += '<div>'
									if (cidRes.data.datas[a].heartbeatStatus == 1) {
										html += '<div class="onLine">在线</div>'
									} else {
										html += '<div class="outLine">离线</div>'
									}
									html += '</div>'
									html += '</div>'
								}
								that.title.innerHTML = '<div>' + '设备信息' + '</div>'
								that.content.innerHTML = html;
								overlay1.setPosition(coodinate);
								that.map.addOverlay(overlay1);
							});
						})
					} else if (featureData.values_.type == 2) {
						var cameraGetparam = {
							deviceCameraId: featureData.values_.shuxing.deviceCameraId
						}
						cameraGet(cameraGetparam).then(cameraGetRes => {
							var pixel = that.map.getEventPixel(e.originalEvent);
							that.map.forEachFeatureAtPixel(pixel, function(feature) {
								var attr = feature.getProperties();
								var coodinate = e.coordinate;
								var sblx = ''
								if (cameraGetRes.data.deviceCameraType == "CAPTURE_DAHUA") {
									sblx = '人脸卡口'
								}
								var zt = ''
								if (cameraGetRes.data.heartbeatStatus == 1) {
									zt = '在线'
								} else {
									zt = '离线'
								}
								that.title.innerHTML = '<div>' + cameraGetRes.data
									.deviceCameraName + '</div>'
								that.content.innerHTML = "<div>" +
									'<div style="display:flex;"><div style="width:65px;text-align: right;padding-right: 10px;">状态:</div><span class="' +
									(cameraGetRes.data.heartbeatStatus ==
										1 ? 'onLine' : 'outLine') + '">' + zt + '</span></div>' +
									'<div style="display:flex;"><div style="width:65px;text-align: right;padding-right: 10px;">设备类型:</div>' +
									sblx + '</div>' +
									'<div style="display:flex;"><div style="width:65px;text-align: right;padding-right: 10px;">像机编号:</div>' +
									cameraGetRes.data.deviceCameraId + '</div>' +
									'<div style="display:flex;"><div style="width:65px;text-align: right;padding-right: 10px;">所属区域:</div>' +
									cameraGetRes.data.deviceCameraName + '</div>' +
									'<div style="display:flex;"><div style="width:65px;text-align: right;padding-right: 10px;">经纬度:</div>' +
									cameraGetRes.data.lng + ',' + cameraGetRes.data
									.lat + '</div>' +
									'<div style="display:flex;"><div style="width:65px;text-align: right;padding-right: 10px;">实时解析:</div>' +
									'无' + '</div>' +
									'<div style="display:flex;"><div style="width:65px;text-align: right;padding-right: 10px;">录像解析:</div>' +
									'无' + '</div>' +
									"</div>";
								overlay1.setPosition(coodinate);
								that.map.addOverlay(overlay1);
							});
						})
					}


				})

				//关闭弹出框操作
				this.popupCloser.addEventListener('click', function() {
					overlay1.setPosition(undefined);
				});
				// moveend事件
				this.map.on('moveend', function(event) {
					// 获取当前屏幕范围
					var localPoint = that.getMapPoint()
					var param = {
						deviceControlType: null,
						northEast: localPoint.northEast,
						southWest: localPoint.southWest,
						zoom: localPoint.zoom,
						sceneIds: []
					}
					agg(param).then(res => {
						that.initPoint(res.data)
					})

				});
			},
			initPoint(data) {
				if (data.aggs.length != 0) {
					//打点数据源
					var wrnameData = data.aggs
					this.drawPoint(wrnameData, 1)
				}
				if (data.devices.length != 0) {
					//打点数据源
					var wrnameData = data.devices
					this.drawPoint(wrnameData, 2)
				}
			},
			zeroFill(num, len, radix) {
				var str = num.toString(radix || 10);
				while (str.length < len) {
					str = "0" + str;
				}
				return str;
			},
			/**
			 * 图标文字打点
			 * */
			drawPoint(pointList, type) {
				if (this.feature && this.feature != '') {
					this.pointLayer.getSource().removeFeature(this.feature)
					this.map.removeLayer(this.pointLayer); //在移除图层
				}
				// 打点图标的图层
				this.pointLayer = new ol.layer.Vector({
					source: new ol.source.Vector({
						features: []
					})
				})
				this.map.addLayer(this.pointLayer)
				pointList.forEach((item, index) => {
					var iconSrc = ''
					if (type == 1) {
						iconSrc = '../../../static/images/icon_map_type1.png'
					} else if (type == 2) {
						iconSrc = '../../../static/images/icon_map_type2.png'
					}

					this.feature = new ol.Feature({
						geometry: new ol.geom.Point(ol.proj.transform([Number(item.point.lng), Number(item
								.point.lat)],
							'EPSG:4326', 'EPSG:3857')),
						shuxing: item,
						type: type //1:汇总  2:单个的
					})

					var txt = ''
					if (type == 1) {
						txt = item.total.toString()
					}

					let style = new ol.style.Style({
						image: new ol.style.Icon({
							scale: 0.3,
							src: iconSrc,
							anchor: [0.48, 0.52]
						}),
						text: new ol.style.Text({
							font: 'normal 16px 黑体',
							// // 对其方式
							textAlign: 'center',
							// 基准线
							textBaseline: 'middle',
							offsetY: -5,
							offsetX: 0,
							// backgroundFill: new ol.style.Stroke({
							// 	color: 'rgba(0,0,255,0.7)',
							// }),
							// 文本填充样式
							fill: new ol.style.Fill({
								color: 'rgba(255,255,255,1)'
							}),
							padding: [5, 5, 5, 5],
							text: txt,
						}),
						zindex: 100
					})
					this.feature.setStyle(style);
					this.pointLayer.getSource().addFeature(this.feature);
				});
			},
			// // 点击renderjs层后发送数据到逻辑层
			emitData(e, ownerVm) {
				// console.log(e)
			},
			//获取北东、南西点位
			getMapPoint() {
				var view = this.map.getView()
				var arr = view.calculateExtent(this.map.getSize());
				var itude1 = ol.proj.transform([arr[0], arr[1]], 'EPSG:3857', 'EPSG:4326')
				var itude2 = ol.proj.transform([arr[2], arr[3]], 'EPSG:3857', 'EPSG:4326')
				for (var a = 0; a < 2; a++) {
					if (a == 0) {
						//southWest
						this.wrnameData.push({
							x: itude1[0],
							y: itude1[1]
						})
					}
					if (a == 1) {
						//northEast
						this.wrnameData.push({
							x: itude2[0],
							y: itude2[1]
						})
					}
				}
				var zoom = view.getZoom()
				var northEast = {
					lng: itude2[0],
					lat: itude2[1]
				}
				var southWest = {
					lng: itude1[0],
					lat: itude1[1]
				}
				// var northEast = {lng:106.53536796569858,lat:29.535080210334897}
				// var southWest = {lng:106.49691581726108,lat:29.502665053593542}
				return {
					southWest: southWest,
					northEast: northEast,
					zoom: zoom
				}
			},
			initTreeNode() {
				treeNodeCount().then(res => {
					if (res.code = "00000000") {
						this.nodeArr = res.data
						if (this.nodeArr != null && this.nodeArr.length > 0) {
							for (let i = 0; i < this.nodeArr.length; i++) {
								this.nodeArr[i].id = this.nodeArr[i].regionId
								this.nodeArr[i].label = this.nodeArr[i].regionName
								this.nodeArr[i].type = 1
								if (this.nodeArr[i].subDeviceCount != null && this.nodeArr[i].subDeviceCount !=
									0) {
									this.getDeviceByParentRegionId(this.nodeArr[i].regionId, i)
								}
							}
							this.changeArrToTree()
						}
					}
				})
			},
			getDeviceByParentRegionId(regionId, index) {
				let param = {
					"parentRegionId": regionId
				}
				treeList(param).then(res => {
					if (res.code = "00000000") {
						let children = res.data
						for (let i = 0; i < children.length; i++) {
							children[i].id = children[i].deviceNode.deviceCameraId
							children[i].label = children[i].deviceNode.deviceCameraName
							children[i].type = 2
						}
						this.nodeArr[index].children = children
					}
				})
			},

			changeArrToTree() {
				let data = this.nodeArr
				let result = []
				if (!Array.isArray(data)) {
					return result
				}
				data.forEach(item => {
					delete item.children;
				});
				let map = {};
				data.forEach(item => {
					map[item.regionId] = item;
				});
				data.forEach(item => {
					let parent = map[item.parentId];
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						result.push(item);
					}
				});
				this.data = result
			},
			// // 接收逻辑层发送的数据
			// receiveName(newValue, oldValue, ownerVm, vm) {
			// 	console.log('newValue', newValue)
			// 	console.log('oldValue', oldValue)
			// 	console.log('ownerVm', ownerVm)
			// 	console.log('vm', vm)
			// },
		}
	}
</script>

<style>
@import url("@/static/css/ol.css");

.content {
	width: 100%;
}

.picker-view {
	width: 750rpx;
	height: 600rpx;
	margin-top: 20rpx;
}

.item {
	height: 50px;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.dialog {
	height: auto;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

.zhezhao {
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.5);
}

.olMap {
	position: fixed;
}

/*设置弹出框样式*/
.ol-popup {
	position: absolute;
	background-color: #ffffff;
	-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	padding: 15px;
	border-radius: 10px;
	border: 1px solid #cccccc;
	bottom: 12px;
	left: -50px;
	min-width: 180px;
}

.ol-popup:after,
.ol-popup:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.ol-popup:after {
	border-top-color: #eeeeee;
	border-width: 10px;
	left: 48px;
	margin-left: -10px;
}

.ol-popup:before {
	border-top-color: #cccccc;
	border-width: 11px;
	left: 48px;
	margin-left: -11px;
}

.ol-popup-closer {
	text-decoration: none;
	position: absolute;
	top: 2px;
	right: 8px;
}

.ol-popup-closer:after {
	content: "✖";
}

::v-deep .mapRow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 30px;
	border-bottom: 2px solid #cfcfcf;
}

::v-deep .onLine {
	color: #3db95a;
}

::v-deep .outLine {
	color: #7d7d7d;
}

.btnQ {
	width: 750rpx;
	/* height: 50rpx; */
	background-color: #fff;
	display: flex;
	justify-content: space-evenly;
}

.btnBox {
	display: flex;
	width: 100%;
	text-align: center;
	justify-content: space-between;
	padding: 0 30rpx;
	background-color: #fff;
}

.btns {
	height: 80rpx;
	line-height: 80rpx;
	font-size: 32rpx;
	color: #000;
}
</style>